<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>registry</title>
    <style type="text/css">
        body {
            background-color: #ffffff;
            text-align: center;
        }

        .lp-login {
            position: absolute;
            width: 600px;
            height: 400px;
            top: 50%;
            left: 50%;
            margin-top: -250px;
            margin-left: -250px;
            background: #fff;
            border-radius: 4px;
            box-shadow: 0 0 10px #12a591;
            padding: 57px 50px 35px;
            box-sizing: border-box
        }

        .lp-login .submitBtn {
            display: block;
            text-decoration: none;
            height: 48px;
            width: 150px;
            line-height: 48px;
            font-size: 16px;
            color: #fff;
            text-align: center;
            background-image: -webkit-gradient(linear, left top, right top, from(#09cb9d), to(#02b389));
            background-image: linear-gradient(90deg, #09cb9d, #02b389);
            border-radius: 3px
        }

        input[type='text'] {
            height: 30px;
            width: 250px;
        }

        input[type='password'] {
            height: 30px;
            width: 250px;
        }

        span {
            font-style: normal;
            font-variant-ligatures: normal;
            font-variant-caps: normal;
            font-variant-numeric: normal;
            font-variant-east-asian: normal;
            font-weight: normal;
            font-stretch: normal;
            font-size: 14px;
            line-height: 22px;
            font-family: "Hiragino Sans GB", "Microsoft Yahei", SimSun, Arial, "Helvetica Neue", Helvetica;
        }
    </style>
    <script type="text/javascript" src="/static/js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //添加绑定事件
            $("#getCode").click(
                function () {
                    getCode();
                }
            );
            $(".submitBtn").click(
                function () {
                    submit();
                }
            );
        });

        function getCode() {
            //邮箱正则表达式
            var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
            var email = $("input[name='email']").val();
            if (!email) {
                alert("请填写邮箱地址！");
                return false;
            }
            if (!reg.test(email)) {
                alert("邮箱格式不正确！");
                return false;
            }
            var isRegistered = false;
            //判断是否已注册
            $.ajax({
                url: "/api/user/isRegistered/" + email,
                async: false,
                success: function (result) {
                    if (result) {
                        isRegistered = true;
                        alert("已注册，请登录！");
                    }
                }
            });
            if (isRegistered) {
                return false;
            }
            //生成验证码
            $.ajax({
                url: "/api/code/create/" + email,
                success: function () {
                    alert("验证码已发送，请查收！");
                }
            });
        }

        function submit() {
            //邮箱正则表达式
            var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
            var email = $("input[name='email']").val();
            var password = $("input[name='password']").val();
            var confirmPassword = $("input[name='confirmPassword']").val();
            var code = $("input[name='code']").val();
            if (!email) {
                alert("请填写邮箱地址！");
                return false;
            }
            if (!reg.test(email)) {
                alert("邮箱格式不正确！");
                return false;
            }
            if (!password) {
                alert("请填写密码！");
                return false;
            }
            if (!confirmPassword) {
                alert("请确认密码！");
                return false;
            }
            if (!code) {
                alert("请填写验证码！");
                return false;
            }
            if (password != confirmPassword) {
                alert("密码不一致，请确认！");
                return false;
            }
            //注册
            $.ajax({
                url: "/api/user/registry/" + encodeURIComponent(email) + "/" + password + "/" + code,
                success: function (result) {
                    if (result) {
                        alert("注册成功！");
                        window.location.href = "http://www.abc.com/static/welcome.html?email=" + email;
                    } else {
                        alert("注册失败！");
                    }
                }
            });
        }
    </script>
</head>
<body>
<div>
    <div>
        <form method="post">
            <table class="lp-login">
                <tr>
                    <td align="right"><span>邮箱</span></td>
                    <td align="center">
                        <input type="text" name="email"/>
                    </td>
                </tr>
                <tr>
                    <td align="right"><span>密码</span></td>
                    <td align="center">
                        <input type="password" name="password"/>
                    </td>
                </tr>
                <tr>
                    <td align="right"><span>确认密码</span></td>
                    <td align="center">
                        <input type="password" name="confirmPassword"/>
                    </td>
                </tr>
                <tr>
                    <td align="right"><span>验证码</span></td>
                    <td align="center">
                        <input type="text" name="code"/>
                    </td>
                    <td><a id="getCode" href="javascript:void(0)">获取验证码</a></td>
                </tr>
                <tr align="center">
                    <td colspan="2">
                        <input type="button" class="submitBtn" value="注册"/>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>
</body>
</html>